<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加菜品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form :model="caipin" :rules="rules" ref="caipin" label-width="120px">
        <el-form-item label="菜品名称：" prop="cp_name">
          <el-input v-model="caipin.cp_name"></el-input>
        </el-form-item>
        <el-form-item label="菜品类别：" prop="cp_lb">
          <el-radio-group v-model="caipin.cp_lb">
            <el-radio label="主菜"></el-radio>
            <el-radio label="凉菜"></el-radio>
            <el-radio label="热销菜品"></el-radio>
            <el-radio label="饮料"></el-radio>
            <el-radio label="小吃"></el-radio>
            <el-radio label="炒饭"></el-radio>
            <el-radio label="酒"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜品单价：" prop="price">
          <el-input v-model="caipin.price"></el-input>
        </el-form-item>
        <el-form-item label="菜品数量：" prop="num">
          <el-input v-model="caipin.num" disabled></el-input>
        </el-form-item>
        <el-form-item label="菜品介绍：" prop="mssage">
          <el-input type="textarea" v-model="caipin.mssage"></el-input>
        </el-form-item>
        <el-form-item  label="上传图片">
          <el-upload
            ref="upload"
            :headers="headerObj"
            :data="caipin"
            :auto-upload="false"
            action="http://localhost:3000/api/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog title="图片预览" :visible.sync="dialogVisible" width="50%">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('caipin')">立即添加</el-button>
          <el-button @click="resetForm('caipin')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      caipin: {
        cp_name: '',
        cp_lb: '',
        price: '',
        num: 0,
        mssage: '',
        imgurl: []
      },
      rules: {
        cp_name: [
          { required: true, message: '请输入菜品名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        cp_lb: [
          { required: true, message: '请选择菜品类别', trigger: 'blur' }
        ],
        price: [{ required: true, message: '请填写菜品价格', trigger: 'blur' }
        ]
      },
      headerObj: {
        token: sessionStorage.getItem('token')
      },
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    // 移除图片操作
    handleRemove(file, fileList) {
      const filePath = file.response.data.path
      const i = this.caipin.imgurl.findIndex(x => x.pic === filePath)
      this.caipin.imgurl.splice(i, 1)
      // console.log(this.caipin)
    },
    // 图片预览效果
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 监听图片上传成功的事件
    handleSuccess(response) {
      // console.log(response)
      const picInfo = response.url
      this.caipin.imgurl.push(picInfo)
      this.$http.post('cp', this.caipin).then(res => {
        this.$message.success('添加菜品成功')
        this.$router.push('/cp/listcp')
      })
      // console.log(this.caipin)
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        // console.log(this.caipin)
        if (!valid) return
        this.$refs.upload.submit()
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.$refs.upload.clearFiles()
    }
  }
}
</script>
